<template>
  <Dialog v-model="dialogVisible" :title="dialogTitle">
    <ContentWrap>
      <el-form :model="queryParams" ref="queryFormRef" :inline="true">
        <el-form-item label="物资类别名称" prop="categoryName">
          <el-input v-model="queryParams.categoryName" @keyup.enter="getList" />
        </el-form-item>
        <el-form-item>
          <el-button @click="handleClickSearch">
            <Icon icon="ep:search" />
            搜索
          </el-button>
          <el-button @click="handleClickReset">
            <Icon icon="ep:refresh" />
            重置
          </el-button>
          <el-button @click="handleClickCreate">
            <Icon icon="ep:plus" />
            新建
          </el-button>
        </el-form-item>
      </el-form>
      <Table
        :columns="columns"
        adaptive
        :data="queryData"
        save-key="MaterialCategory"
        @row-dblclick="handleTableDblclick"
      >
        <template #menu="{ row }">
          <context-menu-item label="修改" @click="handleClickUpdate(row)" />
        </template>
      </Table>
    </ContentWrap>
  </Dialog>
  <MaterialCategoryEdit ref="editFormRef" @success="getList" />
</template>
<script setup name="MaterialCategory" lang="ts">
import * as MaterialInfoApi from '@/api/material/materialInfo'
import MaterialCategoryEdit from './MaterialCategoryEdit.vue'
const dialogVisible = ref(false)
const dialogTitle = ref('物资类别')
const queryFormRef = ref()
const editFormRef = ref()
const queryParams = reactive({
  categoryName: undefined
})
const queryData = ref()
const columns = [
  {
    label: '物资类别名称',
    prop: 'categoryName'
  },
  {
    label: '物资类别描述',
    prop: 'categoryDescribe'
  },
  {
    label: '创建时间',
    prop: 'createTime'
  }
]

const handleClickSearch = () => {
  getList()
}

const handleClickReset = () => {
  queryFormRef.value?.resetFields()
  handleClickSearch()
}

const handleClickCreate = () => {
  editFormRef.value.open('create', 0)
}

const handleClickUpdate = (row) => {
  editFormRef.value.open('update', row.id)
}

const handleTableDblclick = (row) => {
  editFormRef.value.open('update', row.id)
}

const getList = async () => {
  try {
    queryData.value = await MaterialInfoApi.listQueryCategory(queryParams)
  } finally {
  }
}

/** 打开弹窗 */
const open = () => {
  dialogVisible.value = true
  handleClickSearch()
}

defineExpose({ open }) // 提供 open 方法，用于打开弹窗
</script>
